<template>
  <div>
    <el-dialog
      class="custom-dialog"
      v-model="dialogVisible"
      :title="title"
      width="730px"
      @close="handleClose"
    >
      <el-form
        class="data-form"
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="底图名称" prop="mapName">
              <el-input
                class="data-input"
                v-model="form.mapName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="底图类型" prop="serviceType">
              <el-select
                class="search-select"
                v-model="form.serviceType"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) of dictOptions['serviceType']"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="底图地址" prop="mapUrl">
              <el-input
                class="data-input"
                v-model="form.mapUrl"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="地形地址">
              <el-input
                class="data-input"
                v-model="form.terrainService"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="设置默认底图">
              <el-radio-group v-model="form.isDefault">
                <el-radio
                  v-for="(item, index) of dictOptions['yn']"
                  :key="index"
                  :value="Number(item.value)"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="封面">
              <VUpload
                :limit="1"
                accept=".png, .jpg, .jepg"
                listType="picture-card"
                uploadText="点击上传封面图"
                v-model="form.files"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDict } from '@/hooks/useDict'
const { dictOptions, initListDictOptions } = useDict()
import VUpload from '@/components/upload/index.vue'
import { baseMapAdd, baseMapEdit } from '@/api/manager/dataManage/baseMap.js'
defineOptions({
  name: 'AddDialog',
})
const props = defineProps({
  detail: {
    type: Object,
  },
})
watch(
  () => props.detail,
  () => {
    if (props.detail.pkid) {
      form.value = { ...props.detail }
      if (props.detail.fileId) {
        form.value.files = [
          {
            fileName: '',
            fileUrl: props.detail.fileUrl,
            pkid: props.detail.fileId,
          },
        ]
      }
    }
  },
)
const emit = defineEmits(['close'])
const title = ref('')
const dialogVisible = ref(false)
const handleClose = () => {
  form.value = { isDefault: 1, files: [] }
  dialogVisible.value = false
  emit('close')
}
const formRef = ref(null)
const form = ref({
  isDefault: 1,
  files: [],
})
const rules = ref({
  mapName: [{ required: true, message: '请输入底图名称', trigger: 'blur' }],
  mapUrl: [{ required: true, message: '请输入底图地址', trigger: 'blur' }],
  serviceType: [{ required: true, message: '请输入底图类型', trigger: 'blur' }],
})
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      const fileId =
        form.value.files && form.value.files.length > 0
          ? form.value.files[0].pkid
          : ''
      const params = {
        ...form.value,
        fileId: fileId,
      }
      let res
      if (form.value.pkid) {
        res = await baseMapEdit(form.value.pkid, params)
      } else {
        res = await baseMapAdd(params)
      }
      if (res.success) {
        form.value = { isDefault: 1, files: [] }
        ElMessage.success('保存成功')
        dialogVisible.value = false
        emit('close', true)
      } else {
        ElMessage.error(res.message)
      }
    } else {
      ElMessage.warning('请正确录入信息')
    }
  })
}
defineExpose({ dialogVisible, title })
onMounted(() => {
  initListDictOptions(['yn', 'serviceType'])
})
</script>
<style lang="scss" scoped></style>
